<template>
  <view class="shunxu-container">
    <view class="bg" :style="{top: topBar.style ==='custom'?'0':-topBar.height+'px'}">
      <view class="text_container">
        <view>连续2次模拟考试</view>
        <view class="yellow">90分以上再去考试！</view>
      </view>
    </view>
    <navbar :title="title" mode="transparent">
      <template v-slot:content>
        <view class="flex-row justify-center" style="width: 100vw">
          <image src="@/static/white_back.png" mode="widthFix" class="back" @click="toBack"></image>
          <text class="self-center title">{{ navTitle }}</text>
        </view>
      </template>
    </navbar>
    <view class="mask" @click="goJingxuan"/>
    <view class="panel">
      <view class="ti-status-container flex-row align-center">
        <view class="item">
          <text class="label">{{ totalCount - finishedCount }}</text>
          <text class="sub-label">未做题</text>
        </view>
        <view class="vLine"/>
        <view class="item">
          <text class="label">{{ finishedCount }}</text>
          <text class="sub-label">已做题</text>
        </view>
        <view class="vLine"/>
        <view class="item" @click="goWrong">
          <text class="label">{{ wrongCount }}</text>
          <text class="sub-label">错题</text>
        </view>
        <view class="vLine"/>
        <view class="item">
          <text class="label red">{{ accuracy }}</text>
          <text class="sub-label">正确率</text>
        </view>
      </view>
      <view class="btn flex-row align-center justify-between" @click="toDetail">
        <view class="flex-col left-container">
          <text class="title">{{ title }}</text>
          <text class="sub-title">题库共有 {{ totalCount }} 道题</text>
        </view>
        <view class="inner-btn center">
          <view class="img"/>
          <text class="title">{{ finishedCount ? '继续答题' : '开始答题' }}</text>
        </view>
      </view>
      <view class="btn zhenshi flex-row align-center justify-between" v-if="type==='shunxu'" @click="goJingxuan">
        <view class="flex-col left-container">
          <text class="title">题目太多，记不过来？</text>
          <text class="sub-title">VIP题库，聪明人只做500题</text>
        </view>
        <image src="https://down.qwdata.vip/app_icon/shunxu_btn_tuijian.png" mode="widthFix"
               class="img-tuijian"/>
        <view class="inner-btn center">
          <view class="img"/>
          <text class="title">去练习</text>
        </view>
      </view>
      <view class="btn zhenshi flex-row align-center justify-between" v-else-if="coursesContents.length"
            @click="goCourse">
        <view class="flex-col left-container">
          <text class="title">{{ title }}</text>
          <text class="sub-title">专项练习视频讲解</text>
        </view>
        <image src="https://down.qwdata.vip/app_icon/shunxu_btn_tuijian.png" mode="widthFix"
               class="img-tuijian"/>
        <view class="inner-btn center">
          <view class="img"/>
          <text class="title">看视频</text>
        </view>
      </view>
    </view>
    <ADIntercept ref="ADIntercept"></ADIntercept>
    <VideoLessonView title="做题累了？来看看3小时精讲吧！" v-if="type==='shunxu'"></VideoLessonView>
    <GatewayDialog ref="GatewayDialog" page="lianxi"></GatewayDialog>
    <TiyanDialog :bottom="true"></TiyanDialog>
  </view>
</template>

<script>
import {mapGetters} from 'vuex'
import navbar from '@/components/navbar'
import VideoLessonView from "@/pages/home/VideoLessonView.vue";
import {courseApi, questionApi} from "@/api";
import ADIntercept from "@/components/ADIntercept.vue";
import GatewayDialog from "@/components/GatewayDialog.vue";
import TiyanDialog from "@/components/TiyanDialog.vue";

export default {
  components: {
    TiyanDialog,
    GatewayDialog,
    ADIntercept,
    VideoLessonView,
    navbar
  },
  data() {
    return {
      title: '',
      type: '',
      courseId: null,
      kemu: '1',
      coursesContents: [],
      tagTotalCount: 0,
      tagWrongCount: 0,
      tagCorrectCount: 0,
      tagFinishedCount: 0,
      isManfen: false,
    }
  },
  computed: {
    ...mapGetters(['topBar', 'carType']),
    ...mapGetters('question', ['kemu1', 'kemu4']),
    navTitle() {
      if (this.kemu === '1') {
        return '科一' + this.title
      } else if (this.kemu === '4') {
        return '科四' + this.title
      } else if (this.kemu === '5') {
        return '满分学习'
      }
    },
    finishedCount() {
      if (this.type === 'shunxu') {
        if (this.kemu === '1') {
          return this.kemu1.shunxuFinishedCount
        } else {
          return this.kemu4.shunxuFinishedCount
        }
      }
      return this.tagFinishedCount
    },
    totalCount() {
      if (this.type === 'shunxu') {
        if (this.isManfen) {
          if (this.carType === 2) {
            return this.kemu1.shunxuTotalCount + this.kemu4.huocheTotalCount + this.kemu1.huocheTotalCount
          }
        }
        if (this.kemu === '1') {
          if (this.carType === 1) {
            return this.kemu1.shunxuTotalCount
          } else if (this.carType === 2) {
            return this.kemu1.shunxuTotalCount + this.kemu1.huocheTotalCount
          } else if (this.carType === 3) {
            return this.kemu1.shunxuTotalCount + this.kemu1.kecheTotalCount
          }
        } else if (this.kemu === '4')  {
          if (this.carType === 1) {
            return this.kemu4.shunxuTotalCount
          } else if (this.carType === 2) {
            return this.kemu4.shunxuTotalCount + this.kemu4.huocheTotalCount
          } else if (this.carType === 3) {
            return this.kemu4.shunxuTotalCount + this.kemu4.kecheTotalCount
          }
        } else if (this.kemu === '5')  {
          if (this.carType === 2) {
            return this.kemu1.shunxuTotalCount + this.kemu4.huocheTotalCount + this.kemu1.huocheTotalCount
          }
        }
      }
      return this.tagTotalCount
    },
    wrongCount() {
      if (this.type === 'shunxu') {
        if (this.kemu === '1') {
          return this.kemu1.shunxuWrongCount
        } else {
          return this.kemu4.shunxuWrongCount
        }
      }
      return this.tagWrongCount
    },
    correctCount() {
      if (this.type === 'shunxu') {
        if (this.kemu === '1') {
          return this.kemu1.shunxuFinishedCount - this.kemu1.shunxuWrongCount
        } else {
          return this.kemu4.shunxuFinishedCount - this.kemu4.shunxuWrongCount
        }
      }
      return this.tagCorrectCount
    },
    accuracy() {
      let result = this.correctCount / this.finishedCount
      return Math.round((result || 0) * 100) + '%'
    }
  },
  async onLoad({kemu = '1', type, title, isManfen = 0}) {
    this.isManfen = isManfen === '1'
    this.kemu = kemu
    this.type = type
    this.title = title
    if (type !== 'shunxu') {
      const res = await questionApi.tag(type)
      const {
        totalCount,
        wrongCount,
        correctCount,
        finishedCount
      } = res.data.data
      this.tagTotalCount = totalCount
      this.tagWrongCount = wrongCount
      this.tagCorrectCount = correctCount
      this.tagFinishedCount = finishedCount
      this.courseId = 'QNW000003'

      const res2 = await courseApi.contentsByTag(this.courseId, type)
      this.coursesContents = res2.data.data.list
    }
  },
  mounted() {

  },
  methods: {
    async toDetail() {
      try {
        await this.$refs.GatewayDialog.tryOpen()
        await this.$refs.ADIntercept.tryOpen()
        uni.redirectTo({
          url: `/pages/detail/detail?type=${this.type}&title=${this.title}&kemu=` + this.kemu
        })
      } catch (e) {
        console.log(e)
      }
    },
    goJingxuan() {
      uni.navigateTo({
        url: '/pages/detail/detail?type=jingxuan&title=精选题库&kemu=' + this.kemu,
      });
    },
    goMijuan() {
      uni.navigateTo({
        url: '/pages/mijuan/mijuan?kemu=' + this.kemu
      })
    },
    goCourse() {
      let url = '/pages/course_list/course_list?courseId=' + this.courseId + '&tagId=' + this.type
      uni.navigateTo({
        url
      })
    },
    goWrong() {
      uni.navigateTo({
        url: '/pages/mine_wrong/mine_wrong',
      });
    },
    toBack() {
      uni.navigateBack()
    },
  }
}
</script>

<style lang="scss">
page {
  background-color: #fff;
}

.top-bar {
  .back {
    position: absolute;
    left: 30upx;
    width: 36upx;
    height: 36upx;
    align-self: center;
  }

  .title {
    font-weight: bold;
    font-size: 32upx;
    color: #FFFFFF;
  }
}

.shunxu-container {
  display: flex;
  flex-direction: column;
  position: relative;

  .bg {
    position: fixed;
    top: 0;
    width: 100%;
    background-image: url("@/static/shunxulianxi_bg.png");
    height: 450rpx;
    background-size: cover;
    background-position: top;
    .text_container {
      position: absolute;
      left: 46rpx;
      top: 224rpx;
      font-size: 40rpx;
      font-weight: bold;
      color: #fff;
      .yellow {
        margin-top: 16rpx;
        color: rgba(247, 255, 154, 1);
      }
    }
  }

  .mask {
    position: absolute;
    top: 350upx;
    width: 100vw;
    height: 80upx;
    z-index: 1
  }

  .panel {
    background-color: #fff;
    margin: 300upx 0 0 0;
    z-index: 1;
    padding: 30upx;
    border-top-right-radius: 32upx;
    border-top-left-radius: 32upx;
    display: flex;
    flex-direction: column;
    padding-top: 0;

    .mijuan-container {
      position: relative;
      width: calc(100vw - 120upx);
      height: calc((100vw - 120upx) * 108 / 618);

      .img-bg {
        position: absolute;
        width: calc(100vw - 120upx);
        height: calc((100vw - 120upx) * 108 / 618);
      }

      .img-btn {
        position: absolute;
        right: 30upx;
        width: 160upx;
        height: 70upx;
      }
    }

    .ti-status-container {
      margin-bottom: 50upx;
      margin-top: 50upx;

      .vLine {
        width: 1upx;
        height: 83upx;
        background-color: #F3F3F3;
      }

      .item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        flex: 1;
        align-items: center;
        //border-right: 4upx dashed #e5e5e5;

        &:last-child {
          border: none;
        }

        .label {
          font-weight: bold;
          font-size: 42upx;
          color: #000000;

          &.red {
            color: rgba(0, 192, 144, 1);
          }
        }

        .sub-label {
          font-size: 28upx;
          color: rgba(51, 51, 51, 0.7);
          margin-top: 5rpx;
        }
      }
    }

    .btn {
      height: 140upx;
      border-radius: 70upx;
      background-image: linear-gradient(90deg, #538DFF 0%, #3073F6 100%);
      color: #fff;

      &:last-child {
        margin-top: 30rpx;
      }

      &.zhenshi {
        background-image: linear-gradient(to right, rgb(42, 42, 42), rgb(25, 26, 31));
        position: relative;
        @keyframes tiao {
          0% {
            transform: translateY(-5px);
          }
          50% {
            transform: translateY(0);
          }
          100% {
            transform: translateY(-5px);
          }
        }

        .img-tuijian {
          position: absolute;
          right: 60rpx;
          top: -20rpx;
          width: 142upx;
          height: 48upx;
          animation: tiao 1000ms infinite;
        }

        .left-container {
          .title {
            color: rgb(246, 203, 177);
          }

          .sub-title {
            color: rgba(246, 203, 177, 0.85);
          }
        }

        .inner-btn {
          .img {
            background-image: linear-gradient(to right, rgb(246, 203, 177), rgb(247, 228, 210));
            border-radius: 100rpx;
          }

          .title {
            color: rgb(42, 42, 42);
          }
        }
      }

      .left-container {
        margin-left: 60rpx;

        .title {
          font-weight: bold;
          font-size: 17px;
          color: #FFFFFF;
        }

        .sub-title {
          margin-top: 5rpx;
          opacity: 0.85;
          font-size: 13px;
          color: #FFFFFF;
        }
      }

      .inner-btn {
        width: 184upx;
        height: 76upx;
        margin-right: 36upx;

        .img {
          position: absolute;
          width: 184upx;
          height: 76upx;
          background-image: linear-gradient(to right, rgb(252, 252, 252), rgb(207, 235, 248));
          border-radius: 100rpx;
        }

        .title {
          position: absolute;
          font-weight: bold;
          font-size: 32upx;
          color: #3073F6;
        }
      }
    }

    .tips {
      color: #404040;
      font-size: 24upx;
      text-align: center;
      line-height: 1.75em;
    }
  }
}
</style>
